<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 自定义组件 my-component 的使用 -->
			<my-component></my-component>
		</div>
		<!-- 定义一个模板，用于自定义组件 my-component -->
		<template id="temp">
			<div>
				<h1>这是 template 元素，在外部定义的组件结构。</h1>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/**
			 * 定义名为 my-component 的 Vue 组件，指定其模板为 id 为 'temp' 的模板
			 */
			Vue.component("my-component", {
				template: "#temp"
			})
			/**
			 * 创建一个新的 Vue 实例
			 * 将实例挂载到具有 id 为 'app' 的元素上，并设置数据为空对象
			 */
			new Vue({
				el: "#app",
				data: {}
			})
		</script>

	</body>
</html>